<template>
	<div class="add-blacklist-container">
		<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="closeBlacklist">
			<el-form :model="form" :rules="rules" ref="blacklist" label-width="80px" class="demo-ruleForm">
				<el-form-item label="用户ID" prop="userId"> <el-input v-model="form.userId" placeholder="请输入用户ID"></el-input> </el-form-item>
				<el-form-item label="选择分组" prop="groupName">
					<el-select v-model="form.groupName" placeholder="请选择黑名单分组" no-data-text="请前往分组管理添加分组" style="width: 100%">
						<el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"> </el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeBlacklist">取消</el-button>
				<el-button type="primary" @click="sureBlacklist" class="sure-btn">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { backupData } from '@/utils/tool';
import { getBanGroupOptions } from '@/api/api';
export default {
	name: '',
	components: {},
	props: {
		dialogVisible: {
			require: true,
			type: Boolean,
			default: () => false
		},
		title: {
			require: true,
			type: String,
			default: () => ''
		},
		userList: {
			require: true,
			type: Array,
			default: () => []
		},
		editBlackData: {
			require: true,
			type: Object,
			default: () => {}
		}
	},
	data() {
		const validateUserId = (rule, value, callback) => {
			console.log(value, 'validateUserId:');
			if (this.oldForm.userId === value) {
				return callback();
			}
			if (this.userList.find(item => item.userId === value)) {
				return callback(new Error('用户ID已存在'));
			}
			if (value.trim() === '') {
				return callback(new Error('用户ID不能为空'));
			}
			return callback();
		};
		return {
			form: {
				userId: '',
				groupName: '',
				banGroupId: '' // 绑定的分组id
			},
			options: [],
			rules: {
				userId: [
					{ required: true, message: '用户ID不能为空', trigger: 'blur' },
					{ validator: validateUserId, trigger: 'blur' }
				],
				groupName: [{ required: true, message: '请选择黑名单分组', trigger: 'blur' }]
			},
			oldForm: {}
		};
	},

	mounted() {
		console.log(this.userList, 'title:', this.title);
		if (this.editBlackData?.userId) {
			this.form = { ...this.editBlackData };
			this.oldForm = backupData(this.form);
			// console.log('oldForm', this.oldForm);
		}
		this.initGroupList();
	},
	methods: {
		closeBlacklist() {
			this.$refs['blacklist'].resetFields();
			this.$emit('closeBlacklist');
		},
		sureBlacklist() {
			this.$refs['blacklist'].validate(valid => {
				if (valid) {
					// console.log(this.oldForm, 'oldFrom');
					// console.log(this.form, 'from');
					this.$emit('sureBlacklist', this.form, this.oldForm);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		async initGroupList() {
			try {
				const { data } = await getBanGroupOptions();
				console.log(data);
				this.options = data;
			} catch (error) {
				console.log(error);
				this.$message.error('获取黑名单分组选项列表失败！');
			}
		}
	}
};
</script>

<style lang="less" scoped>
.add-blacklist-container {
	position: relative;
	/deep/.el-input__inner {
		// width: 380px;
		height: 32px !important;
	}
	.dialog-footer {
		border-radius: 4px;
		.sure-btn {
			background: #6384fe;
		}
	}
	/deep/ .el-dialog__body {
		border-top: 1px solid #ccc;
	}
	/deep/ .el-form-item__label {
		font-size: 12px;
	}
}
</style>
